{{define "head"}}
<style>
    .stat-card {
        transition: transform 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-5px);
    }
</style>
{{end}}

{{define "content"}}
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <!-- 欢迎信息 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h1 class="text-2xl font-bold text-gray-900">欢迎回来，{{.userName}}</h1>
        <p class="text-gray-600 mt-2">{{.currentDate}}</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="stat-card bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-file-alt text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-medium text-gray-900">今日文章</h3>
                    <p class="text-2xl font-semibold text-blue-600">{{.todayArticles}}</p>
                </div>
            </div>
        </div>

        <div class="stat-card bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-database text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-medium text-gray-900">总文章数</h3>
                    <p class="text-2xl font-semibold text-green-600">{{.totalArticles}}</p>
                </div>
            </div>
        </div>

        <div class="stat-card bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                    <i class="fas fa-server text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-medium text-gray-900">系统状态</h3>
                    <p class="text-2xl font-semibold text-yellow-600">{{.systemStatus}}</p>
                </div>
            </div>
        </div>

        <div class="stat-card bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fas fa-robot text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-medium text-gray-900">API调用</h3>
                    <p class="text-2xl font-semibold text-purple-600">{{.apiCalls}}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近活动 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-gray-900">最近活动</h2>
            <a href="/history" class="text-blue-600 hover:text-blue-800">
                查看全部 <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        <div class="space-y-4">
            {{range .recentActivities}}
            <div class="flex items-center p-4 bg-gray-50 rounded-lg">
                <div class="flex-shrink-0">
                    <i class="fas fa-clock text-gray-400"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-900">{{.Content}}</p>
                    <p class="text-xs text-gray-500">{{.Time}}</p>
                </div>
            </div>
            {{end}}
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
    // 添加卡片动画效果
    document.querySelectorAll('.stat-card').forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
        });
    });
</script>
{{end}}